<template>
  <view class="container">
    <view class="title">
      <text>历史订单</text>
    </view>
    <view class="order-list">
      <view class="order-item"@click="goDetail(order.tradeNo)" v-for="(order, index) in orderList" :key="order.tradeNo">
        <view class="order-header">
          <text>订单编号：{{ order.tradeNo }}</text>
        </view>
        <view class="order-body">
          <view class="product-info">
            <text class="order-time">购买时间：{{ order.submitTime }}</text>
          </view>
          <text class="order-price"> 0 元</text>
        </view>
      </view>
    </view>
	<view class="page-item">
		<view class="item-total">共有{{total}}条记录</view>
	</view>
	<view class="isover" v-if="flag">------到底啦------</view>
	<footer class="footer">
		<p>&copy; 2023. All rights reserved.</p>
	</footer>
  </view>
</template>

<script>
import moment from 'moment';//引入moment依赖
	import md5 from 'js-md5';//引入md5依赖
	import authenticate from '../../utils/authenticate.js';//引入鉴权方法
	let timeStamp = moment(new Date().getTime()).format("YYYY-MM-DD HH:mm:ss");
	import {
		checkList
	} from '../../api/index.js'; //引入订单列表查询接口
	import {
		checkGoods
	} from '../../api/index.js'; //引入积分商品列表查询接口
	import {
		submit
	} from '../../api/index.js'; //引入下单接口
export default {
  data() {
    return {
      orderList: [],
	  page: 1,
	  pageCount:'',
	  pageSize: '',
	  total:'',
	  flag:false
    }
  },
  methods: {
	getOrderList(){
		checkList( {
			  		"desc": true,
			  		"page": 1,
			  		"pageSize": 10,
			  		"parts": "",
			  		"sortKey": ""
			  })
			  .then(res => {
			  	this.orderList =res.data.data.items //[...this.orderList,...res.data.data.items]
				this.page = res.data.data.page//[...this.page,...res.data.data.page]
				this.pageCount =res.data.data.pageCount// [...this.pageCount,...res.data.data.pageCount]
				this.pageSize =res.data.data.pageSize// [...this.pageSize,...res.data.data.pageSize]
				this.total =res.data.data.total// [...this.total,...res.data.data.total]
			  	console.log(res.data);
				
			  })
			  .catch(error => {
			  	console.log(error)
			  })
		},
		getNextList(){
			checkList( {
				  		"desc": true,
				  		"page": this.page,
				  		"pageSize": 10,
				  		"parts": "",
				  		"sortKey": ""
				  })
				  .then(res => {
				  	this.orderList =[...this.orderList,...res.data.data.items]
					this.page = res.data.data.page
					this.pageCount = res.data.data.pageCount
					this.pageSize = res.data.data.pageSize
					this.total = res.data.data.total
				  	console.log(res.data);
					
				  })
				  .catch(error => {
				  	console.log(error)
				  })
			},
			goDetail(tradeNo) {
				console.log(tradeNo)
				uni.navigateTo({
					url: '/pages/orderDetail/orderDetail?tradeNo='+tradeNo
				})
			  }
			
			
			},
  
  onLoad() {
	  this.getOrderList();
  },
  onReachBottom() {
	  console.log(this.orderList.length)
	  if(this.orderList.length < this.page*10) return this.flag = true
	  console.log('触底了')
	  this.page++
	  this.getNextList()
  }
 
}
</script>

<style  lang="scss">
.container {
    overflow: hidden;
    font-family: HYQihei 40S;
    height: 100%;
    width: 100%;
    top:0;
    left: 0;
    overflow-y: auto;
    background-image: url(https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fa3e25a7e3f031021cdb9/6496b03a54fe0000116b0e3f/16875971508892054901.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
  .title{
	  font-size: 42rpx;
	  font-weight: bold;
	  margin-top: 15rpx;
	  margin-bottom: 8rpx;
	  margin-left: 40rpx;
	  color: #333;
  }
  .order-list {
	 margin: 4px;
	 padding: 0 10px;
	 overflow: hidden;
	 
	  .order-item {
		  margin: 15px 5px 15px 5px;
		  padding: 0 10px;
		  box-shadow: 0px 0px 3px 3px #f8baba;
		  border: 1px solid #EBEEF5;
		  background-color: #ffffff;
		  border-radius: 10px;
		  .order-header {
			  display: flex;
			  justify-content: space-between;
			  font-size: 28rpx;
			  margin-top: 10rpx;
			  font-weight: bold;
			  
		  }
		  .order-body {
			  display: flex;
			  align-items: center;
			  padding-top: 20rpx;
			
			  .product-info {
				  
				  justify-content: center;
				  display: flex;
				  flex: 1;
				  flex-direction: column;
				  
				  .order-time {
					  font-size: 24rpx;
					  color: #999;
				  }
			  }
			.order-price {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
			}
		  }
	  }
  }
  
  .page-item {
	  display: flex;
	  flex: 1;
	  align-items: center;
	  padding-top: 5rpx;
	  font-size: 24rpx;
	 
	  .item-total {
		flex: 1;
		text-align: right;
		padding-right: 20rpx;
	  }
  }
  .isover{
	  width: 100%;
	  height: 50rpx;
	  line-height: 50rpx;
	  text-align: center;
  }
  .footer {
  	text-align: center;
  	padding: 20rpx 0;
  	
  	font-size: 14rpx;
  }
}

</style>